<template>
  <div class="rating">
    <div class="title">Rating</div>
    <div class="content">
      <div class="rating-num">
        <img class="leaps" src="/img/rate-left.png" alt="rate-left" />
        <div class="rate-center">
          <div class="number">{{  props.rating  }}</div>
          <div class="star">
            <div class="star-fill" :style="{ width: (props.rating / 5) * 100 + '%' }"></div>
          </div>
          <div class="votes">{{props.rating}}K votes</div>
        </div>
        <img class="leaps" src="/img/rate-right.png" alt="rate-right" />
      </div>
      <div class="rating-detail">
        <div class="rating-row" v-for="n in 5" :key="n">
          <span class="rating-number">{{ 6 - n }}</span>
          <div class="rating-bar">
            <div class="rating-fill" :style="{ width: getRatingWidth(6 - n) + '%' }"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  rating: {
    type: Number,
    default: () => 0,
    required: true
  }
})
const getRatingWidth = (rating) => {
  const overallRating = props.rating;
  const maxBarWidth = 95;
  const minBarWidth = 5;

  let width = 0;

  if (rating === 5 || rating  === 4) {
    const baseWidth = (overallRating / 5) * 70;
    const randomPart = Math.random() * 30;
    width = baseWidth + randomPart;
  } else {
    const randomScale = 15 + rating * 5;
    width = Math.random() * randomScale + minBarWidth;
  }

  width = Math.max(minBarWidth, Math.min(width, maxBarWidth));

  return width;
};
</script>

<style scoped lang="scss">
  .rating {
    .title {
        @include title;
    }
    .content {
      margin-top: 2rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      .rating-num {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: .5rem;
        .leaps {
          height: 80px;
        }
        .rate-center {
          text-align: center;
          .number {
            font-size: 40px;
            font-weight: 600;
          }
          .star {
            position: relative;
            overflow: hidden;
            height: 14px;
            width: 110px; /* 总宽度 */
            &:after {
              content: '';
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
              background: url('@/assets/img/star_hui.png') repeat-x;
              background-size: cover; /* 确保背景图按比例填充 */
            }
            .star-fill {
              position: absolute;
              top: 0;
              left: 0;
              z-index: 1;
              height: 100%;
              background: url('@/assets/img/star.png') repeat-x;
              background-size: cover; /* 确保背景图按比例填充 */
              overflow: hidden;
            }
          }
          .votes {
            font-size: 10px;
            color: #999999;
          }
        }
      }
      .rating-detail {
        .rating-row {
          display: flex;
          align-items: center;
          margin-bottom: 0.5rem;
        }
        .rating-number {
          width: 20px;
          text-align: right;
          margin-right: 0.5rem;
          font-size: 12px;
        }
        .rating-bar {
          flex-grow: 1;
          height: 8px;
          background-color: #f0f0f0;
          border-radius: 5px;
          overflow: hidden;
        }
        .rating-fill {
          height: 100%;
          background-color: #FFBC4C;
          border-radius: 5px;
        }
      }
    }
  }
</style>